<template>
  <div class="home">
    <el-tabs v-model="activeName" type="border-card" :stretch="true">
      <el-tab-pane label="精选" name="first">
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
        <section class="Select HosAll">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">什么是居民健康卡</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
      </el-tab-pane>
      <el-tab-pane label="饮食与养生" name="second">
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">饮食与养生</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
      </el-tab-pane>
      <el-tab-pane label="两性健康" name="third">
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">两性健康</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
      </el-tab-pane>
      <el-tab-pane label="育儿" name="four">
        <section class="Select HosAll" @click="Healthdetail()">
          <section class="HosImg">
            <img src="../../assets/img/FJ.png" alt="">
          </section>
          <section class="HosCon doctorDepart">
            <h3 class="fontsM">育儿</h3>
            <p class="fonts fontC"> 居民健康卡是基于区域卫生信息平台的信息</p>
          </section>
        </section>
      </el-tab-pane>
    </el-tabs>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar'

export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  components: {
    Tabbar
  },
  methods: {
    Healthdetail () {
      this.$router.push({
        path: '/Healthdetail'
      })
    }
  }
}
</script>

<style scoped>
.home {
  padding-top: 0;
}
.IconLeft img {
  width: 100%;
}
.HosImg {
  flex: 2;
}
</style>
